<template>
	<view class="container">

		<block v-for="item,index in list.formField" :key="index">
			<view class="item">
				<view class="tip-box">
					<title>{{item.title}}</title>
					<title style="color: red;" v-show="item.require">*</title>
				</view>
				<view class="input-box" v-if="item.type=='input'">
					<input :placeholder="item.placeholder" v-model="item.inputValue" placeholder-style="color:#999"
						style="height:80rpx;margin-left: 20rpx;" />
				</view>

				<view class="text-box" v-if="item.type=='textarea'">
					<textarea :placeholder="item.placeholder" v-model="item.textareaValue"
						placeholder-style="color:#999" class="textarea-val" />
				</view>

				<view class="check-box" v-if="item.type=='checkbox'">
					<block v-for="twoItem,towIndex in item.checkboxList" :key="towIndex">
						<!-- check-box-item -->
						<view :class="item.checkboxValue === twoItem.title ? 'checkbox-active' : 'check-box-item'"
							@click="checkboxHandle(index,twoItem.title)">{{ twoItem.title }}</view>
						<!-- <view class="check-box-item" :class="{'checkbox-active':item.checkboxValue==twoItem.title}">{{twoItem.title}}</view> -->
					</block>
				</view>
			</view>
		</block>

		<view style="height:130rpx;width: 100%;">

		</view>
		<view class="sumbit-btn" @click="submitHandle">开始创作</view>
	</view>
</template>

<script>
import Http from '../../utils/http';
const http = new Http()
	export default {
		data() {
			return {
			   list:{}
			}
		},
		onLoad(options) {
			this.refresh(options.id)
		},
		methods: {
			refresh(id){
				http.get("v1/aiCopywriting/detail?id="+id).then(res=>{
					res.data.data.formField = JSON.parse(res.data.data.formField)
					res.data.data.formField
					this.list = res.data.data
					console.log("===>",res);
				})
			},
			submitHandle() {
				for (var i = 0; i < this.list.formField.length; i++) {
					var item = this.list.formField[i]

					console.log("====>", item);
					if (item.require && item.type == 'input' && !item.inputValue) {
						uni.showToast({
							title: item.title + "不能为空",
							icon: "none"
						});
						break;
					}
					if (item.require && item.type == 'textarea' && !item.textareaValue) {
						uni.showToast({
							title: item.title + "不能为空",
							icon: "none"
						})
						break;
					}
					if (item.require && item.type == 'checkbox' && !item.checkboxValue) {
						uni.showToast({
							title: item.title + "请选择一个选项",
							icon: "none"
						})
						break;
					}
				}
				http.post("v1/aiCopywriting/submit",this.list).then(res=>{
					console.log("=======++++",res);
				})

			},
			checkboxHandle(index, title) {
				this.list.formField[index].checkboxValue = title
			}
		}
	}
</script>

<style scoped lang="scss">
	.item {
		color: #333;
		font-size: 32rpx;
		margin: 0 30rpx 30rpx 30rpx;

		.input-box {
			height: 90rpx;
			border: 1rpx solid #dcdcdc;
			margin-top: 20rpx;
			border-radius: 12rpx;
			line-height: 90rpx;
			background: #f1f1f1;
		}

		.text-box {
			height: 170rpx;
			border: 1rpx solid #dcdcdc;
			margin-top: 20rpx;
			border-radius: 12rpx;
			position: relative;
			background: #f1f1f1;

			.textarea-val {
				margin: 20rpx 10rpx;
				height: 130rpx;
				width: 96%;
			}
		}

		.check-box {
			display: flex;
			flex-wrap: wrap;
			margin-top: 20rpx;

			.check-box-item {
				padding: 10rpx 20rpx;
				border: 1rpx solid #e3e3e3;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #666;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}

		.checkbox-active {
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
			font-size: 28rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			color: #00008B;
			border: 1rpx solid #00008B;
			background: #e3f0ff;
		}
	}

	.sumbit-btn {
		height: 90rpx;
		width: 90%;
		line-height: 90rpx;
		text-align: center;
		background: #00008B;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 45rpx;
		position: fixed;
		bottom: 20rpx;
		left: 5%;
	}
</style>